// 本文件是界面UI的根目录

import React from 'react';
import clsx from "clsx";
import {makeStyles} from "@material-ui/core";
import AssistView from "./AssistView";
import ControlPanel from "./ControlPanel";
import Overview from "./Overview";
import DetailView from "./DetailView";
import Header from "./Header"
import { CenterFocusStrong } from '@material-ui/icons';

// 这是JSS的写法，相当于声明了一些css的类
const useStyles = makeStyles(theme => ({   
    root: {
        // backgroundColor:'rgba(100,100,100,0.5)',
        backgroundImage:'linear-gradient(to top ,rgba(100,200,100,0.5),rgba(143,247,248,0.5))',
        position: 'relative',
        width: '100vw',
        height: '100vh',
        overflow: 'hidden',
    },
    view: {
        border: '0px solid rgba(100,100,100,0.7)',
        borderRadius: '10px',
        backgroundColor:'rgba(255,255,255,0.4)'
    },
    header: {
        position: 'absolute',
        top: 0,
        height: 30,
        left: 525,
        right: 70,
        fontSize:27,
        color:"red",
        margin:0
    },
    controlPanel: {
        position: 'absolute',
        top: 280,
        bottom:30,
        left: 300,
        width: 200,
        // border:0,
        
    },
    assistView: {
        position: 'absolute',
        bottom: 500,
        top: 70,
        left: 300,
        width: 200,
    },
    overview: {
        position: 'absolute',
        top: 70,
        bottom: 400,
        left: 520,
        right:300
    },
    detailView: {
        position: 'absolute',
        top: 380,
        bottom: 30,
        left: 520,
        right: 300,
    },
}))

// App组件
function App() {
    // 使用上述的css样式
    const classes = useStyles();

    // 使用classes.root使用样式中定义的root类
    // 可视化项目中，若干视图一般采用绝对布局，方便后续调整各个视图的位置与大小
    // 目前四个视图都是一样的，查看AssistView的注释
    return <div className={classes.root}>
        <div className={ classes.header}><Header/></div>
        <div className={clsx(classes.view, classes.controlPanel)}><ControlPanel/></div>
        <div className={clsx(classes.view, classes.assistView)}><AssistView/></div>
        <div className={clsx(classes.view, classes.overview)}><Overview/></div>
        <div className={clsx(classes.view, classes.detailView)}><DetailView/></div>
    </div>;
}

export default App;
